<template>
    <view class="login-container">
        <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
        <button type="primary" class="btn-login" @click="getUserProfile">一键登录</button>
        <view class="tips-text">登录后尽享更多权益</view>
    </view>
</template>

<script>
    import {
        mapMutations,
        mapState
    } from 'vuex'

    export default {
        name: "my-login",
        computed:{
            ...mapState('m_user',['redirectInfo'])
        },
        data() {
            return {

            };
        },
        methods: {
            ...mapMutations('m_user', ['updateUserInfo','updateToken','updateRedirectInfo']),
            // 获取用户基本信息 , 并赋予 用户基本信息
            async getUserProfile() {
                const res = await uni.getUserProfile({
                    desc: '登录授权'
                }).catch(err => err)
                // 判断是否成功
                if (res.errMsg.search(/fail/g) !== -1)
                    return uni.$showMsg('请重新进行授权!!')
                // 里面包含有 UserInfo相关信息
                this.updateUserInfo(res.userInfo)

                // 获取登录成功的 Token字符串
                this.getToken(res)
            },
            // 调用登录接口 
            async getToken(info) {
                const res = await uni.login().catch(err => err)
                if (res.errMsg.search(/fail/g) !== -1)
                    return uni.$showMsg('登录失败!!')

                const query = {
                    code: res.code,
                    encryptedData: info.encryptedData,
                    iv: info.iv,
                    rawData: info.rawData,
                    signature: info.signature
                }

                const {
                    data: loginRes
                } = await uni.$http.post('/api/public/v1/users/wxlogin', query)
                if (!(loginRes.meta.status === 200 || loginRes.meta.status === 400))
                    return uni.$showMsg('登录失败!!')
                
                // 400 意味着请求有效
                const msg = loginRes.message || {};
                if(loginRes.meta.status === 400){
                    // 模拟 token
                    for (let i = 1; i <= 32; i++) {
                        const n = Math.floor(Math.random() * 16.0).toString(16)
                        msg.token += n
                    }
                }
                
                this.updateToken(msg.token)
                // 判断是否进行 重定向
                this.navigateBack() 
            },
            navigateBack(){
                if(this.redirectInfo && this.redirectInfo.openType === 'switchTab'){
                    uni.switchTab({
                        url: this.redirectInfo.from, 
                        complete: () => {
                            this.updateRedirectInfo(null)
                        }
                    })
                }
            }
        },
    }
</script>

<style lang="scss">
    .login-container {
        height: 750rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #f8f8f8;
        position: relative;
        overflow: hidden;

        &::after {
            content: ' ';
            display: block;
            position: absolute;
            width: 100%;
            height: 40px;
            left: 0;
            bottom: 0;
            background-color: white;
            border-radius: 100%;
            transform: translateY(50%);
        }

        .btn-login {
            width: 90%;
            border-radius: 100px;
            margin: 15px 0;
            background-color: #c00000;
        }

        .tips-text {
            font-size: 12px;
            color: gray;
        }
    }
</style>
